<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
		<meta content=yes name="apple-mobile-web-app-capable">
		<meta content=yes name="apple-touch-fullscreen">
		<meta content="telephone=no,email=no" name="format-detection">
		<style>
			*{
				padding:0;
				margin:0;
			}
			
			html,body{
				width:100%;
				height:100%;
				padding:0;margin:0;
			}
			.header{width:100%;padding:0;margin:0;position:absolute;top:0;}
			.footer{width:100%;transform: rotate(180deg);position:fixed;bottom:0;margin-bottom:0;}
			footer{display: flex;align-items: flex-end;position:relative;bottom:0;}
			#inquire{
				width:100%;
				height:100%;
				/*background: url(img/quireBG.jpg) no-repeat;*/
				/*background-size:100% 100%;*/
				background: -webkit-linear-gradient(left, #E2BA2A, #EECB2E, #EAC52D, #D7AB27);
		   background: -o-linear-gradient(left,#E2BA2A, #EECB2E, #EAC52D, #D7AB27);
		   background: -moz-linear-gradient(left,#E2BA2A, #EECB2E, #EAC52D, #D7AB27);
		   background: -ms-linear-gradient(left,#E2BA2A, #EECB2E, #EAC52D, #D7AB27);
			}
			#word{
				width:100%;
				/*height:10rem;*/
				/*height:100px;*/
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			#word img{
				/*width:80%;
				height:80%;*/
				/*margin:0.8rem 0;*/
			}
			#word img:nth-of-type(1){
				margin:1.3rem 0 0.5rem 0;
				width:90%;
			}
			#word img:nth-of-type(2){
				width:60%;
			}
			#out{
				padding-top:1rem;
				width:100%;
				height:45%;
			}
			#form{
				width:95%;
				height:60%;
				margin:0 auto;
				/*background-color:#F3E162;*/
				border-radius: 0.1rem;
			}
			form{
				width:95%;
				height:100%;
				margin:0 auto;
			}
			form>div{
				width:100%;
				height:80%;
				margin:0 auto;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				margin-bottom:1rem;
				background-color:#F3E162;
				border-radius: 0.1rem;
			}
			.gs{
				width:90%;
				height:100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: space-around;
			}
			.name,.ID{
				border:1px solid #D7C456;
				width:100%;
				height:1.2rem;
				display: flex;
				border-radius:0.2rem;
			}
			.name input,.ID input{
				width:100%;
				border:none;
				background:#EBD759;
				height:1.2rem;
				line-height:1.2rem;
				margin-left: 1.35rem;
				text-indent: 0.2rem;
				border-radius:0 0.2rem 0.2rem 0;
				
			}
			.name input::-webkit-input-placeholder,.ID input::-webkit-input-placeholder { /* WebKit browsers */ 
				font-size:0.32rem;
				} 
.name input:-moz-placeholder,.ID input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
font-size:0.32rem;
} 
.name input::-moz-placeholder,.ID input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
font-size:0.32rem;
} 
.name input:-ms-input-placeholder,.ID input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
font-size:0.32rem;
}
			.name{
				background:url(img/inputIcon_03.jpg) no-repeat 0 center;
				background-size:1.35rem 1.17rem;
			}
			.ID{
				background:url(img/inputIcon_06.jpg) no-repeat 0 center;
				background-size:1.35rem 1.17rem;
			}
			#submit{
				width:60%;
				margin:0 auto;				
				display: flex;
				justify-content: center;
				align-items: center;
				position: static;
			}
			#submit input{
				width:4rem;
				height:1rem;
				border:none;
				background:linear-gradient(#EFDBB1,#DAB26E);
				border-radius:0.1rem;
				color:#fff;
				font-size:0.36rem;
				box-shadow:0 0 1rem #646464;
			}
			.tishi{
				width:100%;
				height:0.6rem;
				background:#ccc;
				color:red;
				line-height: 0.6rem;
				margin:0.3rem 0;
				font-size:0.18rem;
				text-align: center;
				display: none;
				position: absolute;
			}
			.notice{display: flex;justify-content: center;width:100%;margin-top:0.2rem;position: relative;bottom:0.4rem;}
			.notice>div{color:#fff;text-align: justify;width:70%;margin:0 auto;display: flex;flex-direction: column;
				align-items: flex-start;
			}
			h2{font-size:0.40rem;width:100%;text-align: center;}
			.notice p{font-size:0.28rem;}
		</style>
		<script src="js/rem.js"></script>
		
	</head>
	<body>
		<div id="inquire">
			<img src="img/header_01.jpg" alt="" class="header"/>
			<div id="word">
				<img src="img/fyzl_03.jpg" alt="" />
				<img src="img/word_07.png" alt="" />
			</div>
			<p class="tishi"></p>
			<div id="out">
				<div id="form">
				<form onsubmit="return a()" action="end.html">
					<div>
						<div class="gs">
							<div class="name">
								<input type="text" placeholder="姓名" />
							</div>
							<div class="ID">
								<input type="text" placeholder="身份证" id="identity"/>
							</div>
						</div>
						
					</div>
					
					<p id="submit">
						<input type="submit" value="确认登录" id="sub"/>
					</p>
					
				</form>
				
			</div>
			
			
			</div>
			
			
				
				<div class="notice">
					<div>
						<h2>注意事项</h2>
							<p>1.本系统主要用于验证"佛缘之路百印详图"的真伪以及唯一性</p>
							<p>2.请勿将本系统分享给其他用户。</p>
							<p>3.如有任何问题请拨打客服电话:4000000</p>
					</div>
				</div>
				
				
				<footer>
				<img src="img/header_01.jpg" alt="" class="footer"/>
			</footer>
		</div>
		<script src="js/jquery-1.10.1.min.js"></script>
		<script>

				function a(){
					var Name = $(".name input").val();
					var card = $("#identity").val();
					var reg = /^[\u4E00-\u9FA5]{2,6}$/;
					var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
					
					 
					 if(Name.length == 0) {
					 	$(".tishi").show();
					  $(".tishi").html( '名称没有输入');
					  $('.name input').focus();
					  $(".tishi").fadeOut(4000)
							return false;
					 } if(reg.test(Name) === false) {
					 	$(".tishi").show();
					   $(".tishi").html( '名称不合法');
					   $('.name input').focus();
					   $(".tishi").fadeOut(4000)
					   return false;
					  }if(card.length == 0) { 
					  	$(".tishi").show();
					   $(".tishi").html( '身份证号没有输入');
					  $('#identity').focus();
					  $(".tishi").fadeOut(4000)
					  return false;
					 } if(pattern.test(card) === false) {
					 	$(".tishi").show();
					   $(".tishi").html( '身份证号不合法');
					   $('#identity').focus();
					   $(".tishi").fadeOut(4000)
					   return false;
					  }else{
					  	$(".tishi").text() == "";
					  	return true;
					  }
			}
						
				
				
		</script>
	</body>
</html>
